<script setup lang="ts">
import { ListenerProp } from '@varlet/ui';
import { useToggle, watchDebounced } from '@vueuse/shared';
import {  ref } from 'vue';
type CountryType = {
    code: string;
    locale: string;
    name: string;
    flag: string;
};

// 定义 props
defineProps<{
    disabled?: boolean;
    onChange?: ListenerProp<(value: CountryType) => void>;
}>();

// 定义外部事件
const emit = defineEmits(['change']);

// 内部事件
const onChange = (countryData: CountryType) => {
    emit('change', countryData);
    onToggleShow(false);
    searchValue.value = '';
};

// 弹出框显示
const [popupShow, onToggleShow] = useToggle(false);

// 搜索值
const searchValue = ref('');

// 全部的列表
const countryCodeList = ref([
    {src:'IN.png' ,code:'91'},
    {src:'CNY.png' ,code:'86'},
    {src:'HKD.png' ,code:'886'},
    {src:'USD.png' ,code:'1'},
    ]);
</script>
<template>
    <div>
        <div @click="() => !disabled && onToggleShow(true)">
            <slot></slot>
        </div>
        <BottomPopup v-model:show="popupShow" radius :title="$t('Selectareacode')">
            <div class="hl-country-popup">
                <div class="list-box">
                        <div class="list-item" v-for="item in countryCodeList" :key="item.code "
                            @click.stop="onChange(item)">
                            <div class="item-flag">
                                <img :src="$img('country/'+item.src +'')"/>
                            </div>
                            <div class="item-name"> + {{ item.code }}</div>
                        </div>
                </div>
            </div>
        </BottomPopup>
    </div>
</template>

<style lang="scss" scoped>
.hl-country-popup {
    padding: 30px 0;
    overflow: hidden;
    position: relative;

    .search {
        padding: 0 48px;
    }

    .list-box {
        height: 50vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 48px;

        .list-item {
            display: flex;
            align-items: center;
            padding: 20px 0;
            font-size: 28px;
            color: $text;

            .item-flag {
                width: 50px;
                height: 50px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .item-name {
                flex: 1;
                margin-left: 30px;
            }

            .item-code {
                text-align: right;
                flex: 0 0 100px;
            }
        }
    }
}
</style>
